import React, { memo, useCallback, useState } from 'react'
// 如果父组件重新渲染了 用了memo后如果传入的东西不一样子组件会重新渲染 
// useback优化的场景 子组件用memo包裹 并且传入的函数不变
// useState调用后就会重新渲染
// memo的使用
const P1age5=memo((props)=>{
   console.log(props,99);
  return (
    <div>
    <button onClick={props.data}>+1</button>
    </div>
  )
})


export default function Page5() {
  const [count1,setcount1]=useState(0)
  const [count,setcount]=useState(0)
 const ui=useCallback(()=>{
  console.log(66);
  setcount(count+1)
 },[count])
  return (
    <div>
      <h2>useCallBack的使用</h2>
       <div>{count1}</div> 
    <button onClick={()=>{setcount1(count1+1)}}>+1</button>
       <div>{count}</div> 
      {/* 关于组件传值 */}
      {/* <P1age5 data={()=>{ui()}}></P1age5> */}
      <P1age5 data={ui}></P1age5>
    </div>
  )
}
